<template>
<!-- vue的模板里面 所有的内容要被一个根节点包含起来  -->
<!-- 双向数据绑定v-model -->
  <div id="todo-list">  
          <!-- keyup 键盘事件  要知道当前是不是在按回车键enter--$event -->
    <input type="text" v-model="todo" @keyup="addData($event)">
    <button @click="addData($event)">+增加</button>
    <br>
    <hr>
    <br>
    <ul>
      <li v-for="(item,key) in list">
         <input type="checkbox"  v-model= "item.status" >
          {{item}} --------  
          <button @click="removeData(key)">-删除</button> </li>
    </ul>
      <br>
      <h2>进行中</h2>
      <ul>
         <li v-for="(item,key) in list" v-if="!item.status">
           <input type="checkbox" v-model="item.status"> 
           {{item}} -------- 
            <button @click="removeData(key)">-删除</button> 
            </li>
    </ul>
      <br>
      <h2>已完成</h2>
      <ul class="finish">
        <li v-for="(item,key) in list"   v-if="item.status">
           <input type="checkbox"  v-model="item.status"> 
           {{item}} --------  
           <button @click="removeData(key)">-删除</button>
            </li>
      </ul>
 
      
  </div>
</template>

<script>

    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          // 添加属性 文本框添加的内容
          isCheck:false,//复选框的状态标志bool
          todo: '',
          list:[]
        } 
      },
      methods:{ 
        doSomething(){
         alert('key up');
        },
        removeData(obj){
          //delete key条数据
          this.list.splice(obj,1);
        },
        addData(option){
             console.log(option);
            if(this.todo.length != 0)
            {
              // if 按了回车add数据到数组
              if(option.keyCode == 13 || option.pointerType === "mouse")
              {
                     //获取文本框输入的值  push到list中
                 this.list.push({'content':this.todo,'status':this.isCheck});
                 this.todo = '';
              }
         

            }
        }
      }
    }
</script>


<style lang="scss">
.finish li{
  background-color: red;
  list-style: none;
}
</style>
